<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style type="text/css">
        .card {
            width: 367.6px;
            height: 245.8px;
            /* border: 2px solid rgb(238, 238, 238); */
            margin: 0 auto;
            box-sizing: border-box;
            border-radius: 5px;
            border-collapse: collapse;

            border-radius: 5px;
        }

        .img {
            background-image: url("https://cdn.acwing.com/media/article/image/2022/10/12/134627_999826f04a-1.png");
            width: 366px;
            height: 85px;
            box-sizing: border-box;
            background-size: 724px;
            background-repeat: no-repeat;
            background-position-x: -296px;
            border: solid lightgray;
            border-width: 1px 1px 0 1px;
            position: relative;
            left: 0px;
            border-radius: 5px 5px 0 0;

        }

        .body {
            width: 366px;
            height: 159.2px;
            box-sizing: border-box;
            border: solid lightgray;
            border-width: 0 1px 1px 1px;
            border-radius: 0 0 5px 5px;
        }

        .body-left {
            width: 70px;
            height: 159px;
            text-align: center;
            display: inline-block;
        }

        .body-left img {
            width: 48px;
            height: 48px;
            border-radius: 50%;
            margin: 10px auto;
        }

        .body-right {
            width: calc(100% - 70px);
            height: 155px;
            float: right;
        }

        .body-right-head {
            width: 276px;
            height: 30px;
            margin-bottom: 10px;
            margin-top: 13px;

        }

        .body-right-head-username {
            color: #fb7299;
            font-size: 16px;
            margin-right: 5px;
        }

        .body-right-head-xingbie {
            width: 20px;
            height: 16px;
            margin-right: 5px;
        }

        .body-right-head-xingbie>img {
            width: 16px;
            height: 16px;

        }

        .body-right-head-dengji {
            width: 30px;
            height: 30px;
            margin-right: 9px;
        }

        .body-right-head-dengji>img {
            width: 30px;
            height: 16px;
        }

        .body-right-head-svip {
            width: 60px;
            height: 18px;
        }

        .body-right-head-svip>img {
            width: 60px;
            height: 18px;
            position: relative;
            bottom: -2px;
        }

        .body-right-honor-shu {
            color: #18191c;
            font-size: 12px;

        }

        .body-right-honor-zi {
            color: #9499a0;
            font-size: 12px;
            /* margin-left: 3px; */
        }

        .body-right-jianjie {
            color: #9499a0;
            padding-top: 8px;
            font-size: 12px;
        }

        .body-right-button {
            margin-top: 16px;
            font-size: 14px;
            border: none;
        }

        .body-right-button-left {
            width: 100px;
            height: 30px;
            background-color: #00AEEC;
            border: none;
            color: #FFFFFF;
            margin-right: 8px;
            cursor: pointer;
            border-radius: 3px;
        }

        .body-right-button-right {
            border: none;
            width: 100px;
            height: 30px;
            cursor: pointer;
            border-radius: 3px;
            background-color: #FFFFFF;
            color: #61666D;
            border: lightgray 1px solid;
        }

        .body-right-button-right:hover {
            color: rgb(0, 174, 236);
            border-color: rgb(0, 174, 236);
        }
    </style>
</head>

<body>
    <div class="card">

        <div class="img">
            <!-- <a href="https://ibb.co/n81P0qn"><img src="https://i.ibb.co/M51BhyG/1.png" alt="1" border="0" /></a> -->
        </div>
        <div class="body">
            <div class="body-left">
                <a href="https://space.bilibili.com/310865582?spm_id_from=333.788.0.0" target="_blank">
                    <img src="https://cdn.acwing.com/media/article/image/2022/10/12/134627_c60c81884a-QQ%E5%9B%BE%E7%89%8720221012203814.jpg"
                        alt="头像">

                </a>
            </div>
            <div class="body-right">
                <div class="body-right-head">
                    <span class="body-right-head-username">心酸老罗</span>
                    <span class="body-right-head-xingbie"><img
                            src="https://cdn.acwing.com/media/article/image/2022/10/12/134627_41ef286c4a-%E5%9B%BE%E7%89%871.png"
                            alt="男性"></span>
                    <span class="body-right-head-dengji"><img
                            src="https://cdn.acwing.com/media/article/image/2022/10/12/134627_72201d844a-%E5%9B%BE%E7%89%872.png"
                            alt="lv"></span>
                    <span class="body-right-head-svip"><img
                            src="https://cdn.acwing.com/media/article/image/2022/10/12/134627_9794f5984a-%E5%9B%BE%E7%89%873.png"
                            alt="svip"></span>
                </div>
                <div class="body-right-honor">
                    <span class="body-right-honor-shu">188</span>
                    <span class="body-right-honor-zi">关注</span>
                    <span class="body-right-honor-shu">1785.8万</span>
                    <span class="body-right-honor-zi">粉丝</span>
                    <span class="body-right-honor-shu">1.4亿</span>
                    <span class="body-right-honor-zi">获赞</span>
                </div>
                <div class="body-right-jianjie">最后一次心酸，我最后的倔强！</div>
                <div class="body-right-button">
                    <a href="https://space.bilibili.com/310865582">
                        <button class="body-right-button-left">+关注</button>
                    </a>

                    <a href="https://space.bilibili.com/310865582">
                        <button class="body-right-button-right">发消息</button>
                    </a>
                </div>
            </div>
        </div>
    </div>

</body>

</html>